<script setup lang="ts">
	import {
		useDark,
		useWindowSize,
		useThrottleFn
	} from '@vueuse/core'
	import zhCn from 'element-plus/lib/locale/lang/zh-cn'
	import useAppStore from './stores/modules/app'
	import useSettingStore from './stores/modules/setting'
	import {
		ScreenEnum
	} from './enums/appEnums'
	const appStore = useAppStore()
	const settingStore = useSettingStore()
	const elConfig = {
		zIndex: 3000,
		locale: zhCn
	}
	const isDark = useDark()
	onMounted(async () => {
		//设置主题色
		settingStore.setTheme(isDark.value)
		// 获取配置
		const data: any = await appStore.getConfig()
		// 设置网站logo
		let favicon: HTMLLinkElement = document.querySelector('link[rel="icon"]') !
			if (favicon) {
				favicon.href = data.web_favicon
				return
			}
		favicon = document.createElement('link')
		favicon.rel = 'icon'
		favicon.href = data.web_favicon
		document.head.appendChild(favicon)
	})

	const {
		width
	} = useWindowSize()
	watch(
		width,
		useThrottleFn((value) => {
			if (value > ScreenEnum.SM) {
				appStore.setMobile(false)
				appStore.toggleCollapsed(false)
			} else {
				appStore.setMobile(true)
				appStore.toggleCollapsed(true)
			}
			if (value < ScreenEnum.MD) {
				appStore.toggleCollapsed(true)
			}
		}), {
			immediate: true
		}
	)
</script>

<template>
	<el-config-provider :locale="elConfig.locale" :z-index="elConfig.zIndex">
		<router-view />
	</el-config-provider>
</template>

<style lang="scss">
	
	.font-t {
		margin-top: 24px;
		margin-left: 10px;
		font-size: 12px;
		height: 12px;
		color: rgba(0, 0, 0, .4);
	}

	.demo-image__preview {
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.imgTable {
		width: 80px;
		height: 25px;
	}
	* {
		touch-action: none;
	}
</style>
